<template>
 <div class="Countdown">
   <div class="Countdown-play" v-if="totalSeconds>0">
      剩余:
      <span v-text="day"></span> 天
      <span v-text="hour"></span> 时
      <span v-text="minute"></span> 分
      <span v-text="seconds"></span> 秒
      <span v-text="ssd"></span>
   </div>
   <div class="start" v-else>
      活动结束
   </div>
</div>
</template>

<script>
export default {
  name: "countdownSsd",
  props: {
    times: {
      type: Number,
      default: ''
    }
  },
  data() {
    return {
      totalSeconds: 0
    };
  },
  //3600*24*1000
  computed: {
    day() {
      // 天
      return Math.floor(this.totalSeconds / (3600 * 24*1000));
    },
    hour() {
      // 时
      let temp = this.totalSeconds % (3600 * 24*1000);
      let temp1 = Math.floor(temp / (3600*1000));
      return String(temp1).length<2 ? `0${temp1}` : temp1
    },
    minute() {
      let temp = this.totalSeconds % (3600*1000);
      let temp1 =  Math.floor(temp / (60*1000));
      return String(temp1).length<2 ? `0${temp1}` : temp1
    },
    seconds() {
      let temp = this.totalSeconds % (60*1000);
      let temp1 = Math.floor(temp / 1000);


      return String(temp1).length<2 ? `0${temp1}` : temp1
    },
    ssd(){
      let temp = this.totalSeconds % (1000)
      if(String(temp).length < 2){
         temp = `00${temp}`
      }else if(String(temp).length < 3){
         temp = `0${temp}`
      }
      return temp
    }
  },
  mounted() {
    console.log('xxx进来了')
    this.totalSeconds = this.times;
    this.play();
  },
  methods: {
    play() {
      let timeId = setInterval(() => {
        if (this.totalSeconds == 0 || this.totalSeconds < 0) {
          clearInterval(timeId);
        } else {
          this.totalSeconds-=13;
        }
      }, 13);
    }
  },
  watch: {
    times(val) {
      console.log("times", this.times);
      this.totalSeconds = val;
      this.play();
    }
  }
};
</script>
